<template>
  <view class="container">
    <view class="header">
      <view class="status">{{ formatStatus(detail.status) }}</view>
      <view class="amount">退款金额：¥{{ detail.refund_amount }}</view>
    </view>

    <view class="section">
      <view class="title">售后信息</view>
      <view class="info-item">
        <text class="label">售后单号：</text>
        <text class="value">{{ detail.code }}</text>
      </view>
      <view class="info-item">
        <text class="label">售后类型：</text>
        <text class="value">{{ formatType(detail.type) }}</text>
      </view>
      <view class="info-item">
        <text class="label">申请时间：</text>
        <text class="value">{{ detail.created_at }}</text>
      </view>
      <view class="info-item">
        <text class="label">订单编号：</text>
        <text class="value">{{ detail.order.code }}</text>
      </view>
    </view>

    <view class="section">
      <view class="title">商品信息</view>
      <view class="goods-list">
        <view
          v-for="goods in detail.order.lines"
          :key="goods.id"
          class="goods-item"
        >
          <image
            class="goods-image"
            :src="goods.variant.image_url"
            mode="aspectFill"
          />
          <view class="goods-info">
            <view class="goods-name">{{ goods.name }}</view>
            <view class="goods-spec">
              <text>数量: {{ goods.quantity }}</text>
              <text>¥{{ goods.amount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="title">处理进度</view>
      <view class="timeline">
        <view
          v-for="(item, index) in detail.saleorderservicetimeline_set"
          :key="item.id"
          class="timeline-item"
          :class="{
            'last-item':
              index === detail.saleorderservicetimeline_set.length - 1,
          }"
        >
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <view class="timeline-title">{{ item.title }}</view>
            <view class="timeline-time">{{ item.created_at }}</view>
            <view class="timeline-desc">{{ item.content }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { supplierSaleServiceDetail } from "@/common/apis/supplier.js";

const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});

const detail = ref({});

const statusOptions = [
  { name: "等待审核", value: "pending" },
  { name: "已同意", value: "pass" },
  { name: "退款中", value: "refund" },
  { name: "已拒绝", value: "reject" },
  { name: "已完成", value: "completed" },
  { name: "已取消", value: "canceled" },
];

const typeOptions = [
  { name: "退货退款", value: "return" },
  { name: "仅退款", value: "refund" },
  { name: "换货", value: "replace" },
  { name: "补发商品", value: "reissue" },
];

function formatStatus(status) {
  const c = statusOptions.find((i) => i.value == status);
  return c ? c.name : "";
}

function formatType(type) {
  const c = typeOptions.find((i) => i.value == type);
  return c ? c.name : "";
}

async function fetchDetail() {
  const response = await supplierSaleServiceDetail(props.id);
  if (response) {
    detail.value = response;
  }
}

fetchDetail();
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;

  .status {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .amount {
    font-size: 28rpx;
    color: #e54746;
  }
}

.section {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;

  .title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    position: relative;
    padding-left: 20rpx;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 30rpx;
      background-color: #281e1d;
      border-radius: 4rpx;
    }
  }
}

.info-item {
  display: flex;
  font-size: 28rpx;
  margin-bottom: 15rpx;

  .label {
    color: #999;
    width: 160rpx;
  }

  .value {
    flex: 1;
  }
}

.goods-list {
  margin-top: 20rpx;
}

.goods-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.goods-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-name {
  font-size: 28rpx;
}

.goods-spec {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #999;
}

.timeline {
  position: relative;
  padding-left: 40rpx;
}

.timeline-item {
  position: relative;
  padding-bottom: 30rpx;

  &.last-item {
    padding-bottom: 0;
  }
}

.timeline-dot {
  position: absolute;
  left: -40rpx;
  top: 0;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #281e1d;
}

.timeline-content {
  background-color: #f9f9f9;
  padding: 20rpx;
  border-radius: 8rpx;
}

.timeline-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.timeline-time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.timeline-desc {
  font-size: 26rpx;
  color: #666;
}
</style>
